<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>演示ztree的使用</title>

    <%--导入ztree的资源--%>
    <%--导入js文件--%>
    <script src="/plugins/ztree/js/jquery-1.4.4.min.js"></script>
    <script src="/plugins/ztree/js/jquery.ztree.all-3.5.min.js"></script>
    <%--导入css文件--%>
    <link rel="stylesheet" href="/plugins/ztree/css/zTreeStyle/zTreeStyle.css" type="text/css">

</head>
<body>

<script>

    //页面加载完成后才执行
    $(function () {
        //1.定义全局setting变量
        var setting = {
            //开启复选框
            check: {
                enable: true
            },
            //启用简单json
            data: {
                simpleData: {
                    enable: true
                }
            }
        };


        //2.定义树节点内容（***）
        var zNodes = [
            {id:1,pId:0,name:'货运管理',open:true},
            {id:11,pId:1,name:'购销合同'},
            {id:12,pId:1,name:'出口报运',checked:true}
        ];


        //3.初始化树
        $.fn.zTree.init($("#treeDemo"), setting, zNodes);
    });


</script>

<ul id="treeDemo" class="ztree"></ul>

</body>
</html>
